<template>
  <div class="dc1">{{ message }}</div>
  <div>{{ obj.message }}</div>
  <div>{{ message1 }}</div>
</template>

<script setup>
import { reactive, toRef, ref } from 'vue';
let obj = reactive({ message: "这是对象obj的message属性" });
let message = toRef(obj, "message");
let message1 = ref("这是修改前message1的值");
setTimeout(() => {
  message.value = "这是修改后obj的message属性";
  message1.value = "这是修改后message1的值";
}, 5000)
</script>

<style scoped>
.dv1 {
  background-color: beige;
  font-size: 30px;
}
.dv2 {
  background-color: azure;
  font-size: 30px;
}
</style>